<template>
  <div class="flex gap-2" v-for="(row, idx) in editorState.menu.defaultPages" :key="`row_id_${idx}`">
    <div class="flex gap-2">
      <div class="flex flex-col gap-y-2" v-for="col in (row as MenuType[])" :key="`${col.key}_${col.type}`">
        <span class="text-[#D4D5D8]">{{ col.title }}</span>
        <CanvasView :type="col.key" :viewType="col.type" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { editorState } from '../mixins/useEditorState'
import type { MenuType } from '../types'
import CanvasView from './CanvasView.vue'
</script>

<style scoped></style>
